<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>新媒体行业数据可视化分析</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="echarts.js"></script>
    <script type="text/javascript" src="echarts-wordcloud.js"></script>
    
    <style>
button {
    width: 100px;
    height: 30px;
    text-align: center;
    border: none;
    cursor: pointer;
}

.active {
    background: red;
    color: #fff;
    border: none;
}

* {
    margin: 0px;
    padding: 0;
    list-style: none;
}

#app {
    width: 900px;
    height: 650px;
    border: 1px solid #b3b3b3;
    margin: auto;
}

ul {
    height: 50px;
    background-color: #b6b6b6;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul li {
    width: 200px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
}

#app div {
    padding: 10px;
    font-size: 18px;
}

.active {
    background-color: #00557F;
    color: #fff;
}    
.scroll1 {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #fff;
    font-size: 60px;
}

.chart1{
  width:880px;
  height:500px;  
}
.chart2{
  width:880px;
  height:500px;  
}
.chart3{
  width:880px;
  height:500px;  
}
.chart4{
  width:880px;
  height:500px;  
}
.chart5{
    width: 30000px;
    height:500px ;
}

#page{
    overflow: hidden;
    overflow-x: hidden;
    white-space: nowrap;
}

.wave {
    position: relative;
}


.wave div {
    position     : absolute;
    width        : 800px;
    height       : 800px;
    border-radius: 40%;
    margin-top: -150px;
    overflow-y: hidden;

}

.w1 {
    background: #8fbc8f;
    opacity   : 0.3;
    animation : drift 4s infinite linear;
}

.w2 {
    background: #eee8aa;
    opacity   : 0.5;
    animation : drift 6s infinite linear;
}

.w3 {
    background: #ee82ee;
    opacity   : 0.3;
    animation : drift 8s infinite linear;
}

@keyframes drift {
    from {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

    from {
        -webkit-transform: rotate(360deg);
        transform        : rotate(360deg);
    }
}
        </style>
</head>
<body>
    <div id="app">
        <h1 style="margin-top: 15px;">新媒体行业数据可视化分析</h1>

        <ul>
            <li v-for="(val,index) in item" @click="changes(index)" :class="{active:index == num}">{{item[index]}}
            </li>
        </ul>
        <div class="scroll1" style="width:880px;height:550px;">
            <div :id='cont[index]' :class='cont[index]'  v-for="(val,index) in cont"  v-show="index==num" ></div>
            <!-- <div id='chart2'  v-show="index==num" style="width:800px;height:500px"></div> -->
            <!-- <div id='chart3'  v-show="index==num" style="width:800px;height:500px"></div> -->
            <!-- <div id='chart4'  v-show="index==num" style="width:800px;height:500px"></div> -->
            <div class = "wavve">
                <div class="wave">
                    <div class="w1"></div>
                    <div class="w2"></div>
                    <div class="w3"></div>
                </div>  
            </div> 
        </div>
        
 
    </div>
</body>
<script>

/*
运用知识点：
    v-for
    v-on,简写@
    v-bind简写:
    v-show
思路：
    循环数据，当点击时候，把key传到changes方法中，然后num赋值给active
    循环数组，只要box中key等于num就让它显示出来
*/
new Vue({
    el: '#app',
    data: {
        item: [ "词云——工作内容","地图——地区分布", "饼图——公司规模", "折线图——资历","瀑布图——薪资"], //导航栏标题
        cont: ["chart1", "chart2", "chart3", "chart4","chart5"],
        num: 0
    },
    methods: {
        changes(key) {
            this.num = key;
        }
    }
});
</script>

<script type="module">
var chart1 = echarts.init(document.getElementById('chart1'));
    // 词云图
var chart1option = {
    tooltip: {
        show: true
    },
    series: [{
        type: "wordCloud",
        gridSize:6,//词的间距
        shape:'circle',//词云形状，可选diamond，pentagon，circle，triangle，star等形状
        sizeRange: [12, 45],//词云大小范围
        width:500,//词云显示宽度
        height:500,//词云显示高度
        textStyle: {
            normal: {
                color: "rgb(240,248,255)"},
            emphasis: {
                shadowBlur: 10,//阴影的模糊等级
                shadowColor: '#333'//鼠标悬停在词云上的阴影颜色
            }
        },
        data: [{
                name: " 新媒体运营",
                value: 104,
            },
            {
                name: " 线上运营",
                value: 11,
            },
            {
                name: "  '线下运营'",
                value: 6
            },
            {
                name: " to B",
                value: 4
            },
            {
                name: " to C",
                value: 3
            },
            {
                name: " 短视频运营",
                value: 17
            },
            {
                name: " 教育培训",
                value: 3
            },
            {
                name: " 内容运营",
                value: 28
            },
            {
                name: " 品牌运营",
                value: 9
            },
            {
                name: " 策略运营",
                value: 22
            },
            {
                name: " 自媒体运营",
                value: 38
            },
            {
                name: " 自媒体平台",
                value: 15
            },
            {
                name: " 新媒体平台",
                value: 34
            },
            {
                name: " 抖音平台",
                value: 17
            },
            {
                name: "新闻类",
                value: 5
            },
            {
                name: "粉丝运营",
                value: 11
            },
            {
                name: " 活动策划",
                value: 12
            },
            {
                name: " 护肤行业",
                value: 1
            },
            {
                name: " 用户运营",
                value: 13
            },
            {
                name: " 广告投放/流量运营",
                value: 9
            },
            {
                name: " 信息流投放",
                value: 5
            },
            {
                name: " 社区运营",
                value: 3
            },
            {
                name: " 新媒体运营总监",
                value: 1
            },
            {
                name: " 内容运营",
                value: 7
            },
            {
                name: " 渠道推广",
                value: 4
            },
            {
                name: " 品牌活动",
                value: 1
            },
            {
                name: " 活动运营",
                value: 10
            },
            {
                name: " 平台运营",
                value: 26
            },
            {
                name: " 微博平台",
                value: 10
            },
            {
                name: " 快手平台",
                value: 3
            },
            {
                name: " 数据运营",
                value: 14
            },
            {
                name: " 数据分析",
                value: 7
            },
            {
                name: " 文学类",
                value: 1
            },
            {
                name: " IT/互联网/软件",
                value: 5
            },
            {
                name: " 产品运营",
                value: 10
            },
            {
                name: " 文案",
                value: 8
            },
            {
                name: " kol",
                value: 5
            },
            {
                name: " 社交平台",
                value: 3
            },
            {
                name: " 小红书平台",
                value: 14
            },
            {
                name: " 网络营销",
                value: 3
            },
            {
                name: " 整体运营",
                value: 2
            },
            {
                name: " 市场策划",
                value: 4
            },
            {
                name: " 渠道运营",
                value: 8
            },
            {
                name: " 内容运营管理",
                value: 1
            },
            {
                name: " 新媒体编辑",
                value: 1
            },
            {
                name: " 微信公众号",
                value: 13
            },
            {
                name: " 新媒体广告",
                value: 2
            },
            {
                name: " 家居类",
                value: 1
            },
            {
                name: " 餐饮 生鲜 品牌",
                value: 1
            },
            {
                name: " 批发/零售",
                value: 1
            },
            {
                name: " 快消品类",
                value: 1
            },
            {
                name: " 家装类",
                value: 1
            },
            {
                name: " 广告/传媒/文化",
                value: 3
            },
            {
                name: " 文案编辑",
                value: 1
            },
            {
                name: " 电子商务",
                value: 9
            },
            {
                name: " 社区/社群运营",
                value: 3
            },
            {
                name: " 得物",
                value: 2
            },
            {
                name: " 网络推广",
                value: 7
            },
            {
                name: " 投放平台",
                value: 1
            },
            {
                name: " 种草",
                value: 1
            },
            {
                name: " 装饰装修",
                value: 1
            },
            {
                name: " 游戏行业",
                value: 1
            },
            {
                name: " MCN运营",
                value: 1
            },
            {
                name: " taptap",
                value: 1
            },
            {
                name: " 游戏运营",
                value: 1
            },
            {
                name: " 娱乐类",
                value: 1
            },
            {
                name: " 教育",
                value: 1
            },
            {
                name: " 选题策划",
                value: 1
            },
            {
                name: " 电商运营",
                value: 3
            },
            {
                name: " 汽车行业",
                value: 1
            },
            {
                name: " 消费品",
                value: 2
            },
            {
                name: " 网站运营",
                value: 1
            },
            {
                name: " 网店运营",
                value: 1
            },
            {
                name: " 市场运营",
                value: 2
            },
            {
                name: " 营销策划",
                value: 3
            },
             {
                name: " 市场推广",
                value: 3
            },
             {
                name: " 社群运营",
                value: 7
            },
             {
                name: " 广告创意",
                value: 2
            },
             {
                name: " 大健康",
                value: 1
            },
             {
                name: " 策划运营",
                value: 1
            },
             {
                name: " 内容活动运营",
                value: 1
            },
             {
                name: " 互联网大党建",
                value: 1
            },
             {
                name: " 互联网+央企内宣",
                value: 1
            },
             {
                name: " 项目管理",
                value: 1
            },
             {
                name: " 团队管理",
                value: 2
            },

             {
                name: " 媒介",
                value: 1
            },
             {
                name: " 抖音快手",
                value: 5
            },
             {
                name: " 视频类",
                value: 3
            },
            {
                name: " 生活类",
                value: 1
            },
            {
                name: " 运营规划",
                value: 3
            },
            {
                name: " 运营推广",
                value: 2
            },
            {
                name: " 引流拉新",
                value: 2
            },
            {
                name: " 用户促活",
                value: 2
            },
            {
                name: " 用户转化",
                value: 2
            },
            {
                name: " 知乎平台",
                value: 3
            },
            {
                name: " 电商平台",
                value: 1
            },

            {
                name: " 直播平台",
                value: 1
            },
            {
                name: " B站运营",
                value: 1
            },
            {
                name: " 运营管理",
                value: 1
            },
            {
                name: " 市场营销",
                value: 1
            },
            {
                name: " 市场拓展",
                value: 1
            },
            {
                name: " 效果评估",
                value: 1
            },
            {
                name: " 软文",
                value: 1
            },
            {
                name: " 广告公司",
                value: 1
            },
            {
                name: " 4A公司背景",
                value: 1
            },
            {
                name: " 裂变",
                value: 1
            },
            {
                name: " 拉新",
                value: 1
            },
            {
                name: " 引流",
                value: 1
            },
            {
                name: " 转化",
                value: 1
            },
            {
                name: " 教育新媒体",
                value: 1
            },
            {
                name: " 品牌策划",
                value: 1
            },
            {
                name: " 营销推广",
                value: 1
            },
            {
                name: " 冥想",
                value: 1
            },
            {
                name: " 身心健康",
                value: 1
            },
            {
                name: " 社交媒体",
                value: 1
            },
            {
                name: " 心理健康",
                value: 1
            },
            {
                name: " 小程序运营",
                value: 1
            },
        ],
    }]
};
chart1.setOption(chart1option);
</script>



<script type="text/javascript">
// 链接div id
var chart2 = echarts.init(document.getElementById('chart2'));

// 地图
chart2.showLoading();
$.get('https://geo.datav.aliyun.com/areas_v3/bound/440100_full.json', function (geoJson) {
  chart2.hideLoading();
  echarts.registerMap('GZ', geoJson);
  chart2.setOption(
    (chart2option = {
      title: {
        text: '新媒体公司广州各区分布',
        subtext: '地图数据来自阿里地图',
        sublink:
          'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} 个'
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      visualMap: {
        min: 0,
        max: 17,
        text: ['最多', '最少'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      series: [
        {
          name: '广州市公司',
          type: 'map',
          map: 'GZ',
          label: {
            show: true
          },
          data: [
            { name: '从化区', value: 0 },
            { name: '花都区', value: 1 },
            { name: '白云区', value: 15 },
            { name: '增城区', value: 5 },
            { name: '黄埔区', value: 8 },
            { name: '天河区', value: 15 },
            { name: '越秀区', value: 6 },
            { name: '荔湾区', value: 0},
            { name: '海珠区', value: 11 },
            { name: '番禺区', value: 17 },
            { name: '南沙区', value: 3 }
          ],
        }
      ]
    })
  );
});

chart2.setOption(chart2option);


</script>

<script type="text/javascript">
var chart3 = echarts.init(document.getElementById('chart3')); 

// 饼图
var chart3option = {
  backgroundColor: '#2c343c',
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 35,
    max: 35,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: '公司规模',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 33, name: '1-49人' },
        { value: 1, name: '10000人以上' },
        { value: 5, name: '1000-2000人' },
        { value: 20, name: '100-499人' },
        { value: 2, name: '2000-5000人' },
        { value: 5, name: '5000-10000人' },
        { value: 27, name: '50-99人' }
        
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};

chart3.setOption(chart3option); 
</script>

<script type="text/javascript">
var chart4 = echarts.init(document.getElementById('chart4'));

// 折线图
const colors = ['#5470C6', '#EE6666'];
    var chart4option ={
  color: colors,
  tooltip: {
    trigger: 'none',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {},
  grid: {
    top: 70,
    bottom: 50
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[1]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              '工作经验 ' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          }
        }
      },
      // prettier-ignore
      data: ['1-3年','3-5年','5-10年','经验不限','一年以下']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },
      axisPointer: {
        label: {
          formatter: function (params) {
            return (
              '工作经验 ' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          }
        }
      },
      // prettier-ignore
      data:['1-3年','3-5年','5-10年','经验不限','一年以下']
    }
  ],
  yAxis: [
    {
      type: 'value'
    },
  ],
  series: [
    {
      name: '专科',
      type: 'line',
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [27,18,7,6,1]
    },
    {
      name: '本科',
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [17,23,13,7,0]
    }
  ]
};


chart4.setOption(chart4option);

</script>

<script type="text/javascript">
var chart5 = echarts.init(document.getElementById('chart5'));

var chart5option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      let tar;
      if (params[1] && params[1].value !== '-') {
        tar = params[1];
      } else {
        tar = params[2];
      }
      return tar && tar.name + '<br/>' + tar.seriesName + '最高薪资:' + tar.value + 'k';
    }
  },
  legend: {
    data: ['本科', '专科'],
    left:10
  },
  grid: {
    left: '0%',
    right: '0%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [
   '广州时代华商人才培训股份有限公司',
   '广州市冠尚玉文化传媒有限公司',
   '广州惠和营销咨询管理有限公司',
   '广东斌锋安全服务有限公司',
   '广州鬼谷信息科技有限公司',
   '致学教育', 
   '某知名公司',
   '广州智惠宝网络科技有限公司',
   '海华税务师事务所有限公司',
   '广东斌锋安全服务有限公司',
   '某广州专业服务公司',
   '点竞石',
   '广州欧博化妆品有限公司',
   '西藏保利爱家房地产经纪有限公司',
   '广州宠小到大智能科技有限公司',
   '赵一鸣零食' ,
   '赵一鸣零食',
   '赵一鸣零食',
   '超境汽车',
   '广州美逅装饰设计工程有限公司',
   '广州美逅装饰设计工程有限公司',
   '广州光晨信息科技有限公司',
   '广州悦龙印刷有限公司',
   '广州敏耀包装材料',
   '广州古禾供应链有限公司',
   '广州光晨信息科技有限公司',
   '海华税务师事务所有限公司',
   '众上集团',
   '某南京贸易进出口公司',
   '广东森宝文化实业有限公司',
   '梵蜜琳',
   '梵蜜琳',
   '木瓜家装',
   '广州星游互动网络有限公司',
   '木瓜家装',
   '广州阿道夫个人护理用品有限公司',
   '广州阿道夫个人护理用品有限公司',
   '广州心创供应链管理有限公司',
   '希沃',
   '中旅商务旅行服务(广州)有限公司',
   '广州菲尔曼生物科技有限公司',
   '广州军道科技有限公司',
   '华胜集团',
   '广州聚超软件科技有限公司',
   '创商教育集团',               
   '君康生物科技(广州)有限公司',  
   '广州宠小到大智能科技有限公司',
   '广州莉微娜生物科技有限公司',   
   '广东壹加再生医学研究院有限公司',
   '广州优智保智能环保科技有限公司',
   '幸福有方(广州)咨询服务有限公司',
   '知微科技',
   '轻微课教育',
   '广州墨鱼教育科技有限公司',
   '广州市泰迪熊婴幼儿用品有限公司',
   '深圳市润美文化传媒有限公司',
   '杰凡尼',
   '木棉花生殖专科连锁',
   '广州市泰迪熊婴幼儿用品有限公司',
   '广州炫动信息科技有限公司',
   '好融科技',
   '某知名公司',
   '康耐登',
   '广州盛博家居有限公司',
   '常青学车服务(广州)有限公司',
   '广州华玺教育科技发展有限公司',
   '瑞浩能源(广东)有限公司',
   '致学教育',
   '诺氧健康',
   '广州市全酋通物流供应链有限公司',
   '广州英凡妮生物科技有限公司',
   '广州伊羡医疗美容门诊部有限公司',
   '广州晓晓传播科技有限公司',
   '广州叁人行教育科技有限公司',
   '广州大题小做教育咨询有限公司',
   '广州深寰宇酒业有限公司',
   '广州市显浩医疗设备股份有限公司',
   '广州市一亩三分地农业发展有限公司',
   '太平洋网络',
   '广州铂芯科技有限公司',
   '香港安植集团有限公司',
   '广州奥鹏能源科技有限公司',
   '梵蜜琳',
   '梵蜜琳',
   '某国内人力资源服务公司',
   '梵蜜琳',
   '广东白驹逸文化服饰有限公司',
   '广州奥鹏能源科技有限公司',
   '广州乐美生物科技有限公司',
   '瀚森投资',
   '南方传媒',
   '三雄极光照明',
   '广东鼎湖山泉',
   '某广州机械/设备上市公司',
   '溪木源' ,
   '广州康立明生物科技股份有限公司',
   '某知名公司' ,
   '优端环保',
   '广州爱课堂教育咨询有限公司',
   '广州善利信息科技有限公司',
   '广州云端共享实业有限公司',
   '广东韩世国际文化有限公司',
   '广州万卡联电子产品有限公司',
   '老板电器',
   '因恩科技集团(佛山)有限公司' ,
   '瑞浩能源(广东)有限公司', 
   '汉正家族办公室(广州)有限公司',
   '广州莱丝漾生物科技有限公司',
   '广州无塑地球新材料科技有限公司',
   '优宠宠物食品(广东)有限公司',
   '广州童学们好文化创意有限公司',
   '广州雇者品牌咨询有限公司',
   '万浦森教育科技(佛山)有限公司',
   '迈格森国际教育',
   '草本趣时',
   '潮汐',
   '广州嘉上嘉商业经营管理有限公司',
   '广州版权产业服务中心有限公司',
   '广东加拿达教育科技有限公司',
],
    axisTick:{
      alignWithLabel:true
    }},
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      silent: true,
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [8, 30, 12, 8, 15, 9, 15,20,12,6,6,11,10,8,6,20,20,15,15,10,8,18,5,7,8,25,12,6,15,5,22,10,7,7,5,15,25,8,12,5,15,15,12,6,8,8,6,5,15,6,6,9,10,4,6,7,15,12,6,10,8,30,12,8,6,20,5,10,18,6,6,8,7,4,4,10,6,5,6,8,8,10,20,15,28,20,5,10,6,13,12,15,15,15,15,12,16,10,7,6,8,5,5,12,11,5,4,5,6,6,8,12,5,7,15,8,5,6,7]
    },
    {
      name: '专科',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      data: [20,45, '-', 12, 25, '-', 30, '-',18,8, '-',18 ,20,'-', 6,'-','-','-','-',15,13,'-',10,10,12,'-',18,'-',30,9,30,20,12,'-',10,'-',35,13,'-',8,'-','-','-',8,15,10,8,7,'-',12,'-','-','-',7,'-',12,20,'-',8,'-','-',50,'-','-','-','-','-','-','-',11,9,'-','-','-',6,15,18,7,'-',15,12,'-','-',30,35,'-',10,'-',11,16,'-','-','-','-',20,'-',25,20,'-','-',15,'-','-','-','-','-',6,10,'-',8,'-',16,'-','-','-','-',8,12,'-']
    },
    {
      name: '本科',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'bottom'
      },
      data: ['-','-', 16, '-', '-' , 13,'-', 30,'-', '-', 10,'-','-',15,'-',27,30,25,25,'-','-',25,'-','-','-',40,'-',13,'-','-','-','-','-',10,'-',25,'-','-',15,'-',20,20,20,'-','-','-','-','-',25,'-',10,15,15,'-',8,'-','-',23,'-',18,13,'-',18,10,9,30,10,15,22,'-','-',10,10,9,'-','-','-','-',10,'-','-',15,25,'-','-',25,'-',20,'-','-',17,25,18,25,'-',15,'-','-',10,10,'-',6,8,18,22,10,'-','-',9,'-',13,'-',10,10,30,15,'-','-',10]
    }
  ]
};
chart5.setOption(chart5option);
    
</script>



